<template>
       <el-autocomplete
              class="wp-form-280"
              v-model="supplier_name"
              :fetch-suggestions="querySearchAsync"
              placeholder="请选择"
              @select="handleSelect"
              @blur="checkValue"
            >
              <i
                class="el-icon-search el-input__icon"
                slot="suffix"
                @click="handleQuery"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="show-name">{{ item.supplierName }}</div>
              </template>
            </el-autocomplete>
</template>
<script>
import purchase from '@/api/eims/purchase/supplierAPI'
export default {
  components: {},
  props: {
    supplierCode: String,
    supplierName: String
  },
  data () {
    return {
      supplierInfoList: [],
      valueIsOk: true,
      supplier_code: this.supplierCode,
      supplier_name: this.supplierName
    }
  },
  watch: {
    supplier_code (val) {
      this.$emit('update:supplierCode', val)
    },
    supplier_name (val) {
      this.$emit('update:supplierName', val)
    }
  },
  mounted () {
    this.getSupplier()
  },
  methods: {
    querySearchAsync (queryString, cb) {
      let supplierInfoList = this.supplierInfoList
      let results = queryString ? supplierInfoList.filter((item) => {
        return (item.supplierName.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }) : supplierInfoList
      if (results && results.length <= 0) {
        this.valueIsOk = false
      }
      cb(results)
    },
    handleSelect (item) {
      this.supplier_code = item.supplierCode
      this.supplier_name = item.supplierName
    },
    handleQuery () {
      this.getSupplier()
    },
    checkValue () {
      if (!this.valueIsOk) {
        this.supplier_name = ''
      }
    },
    getSupplier () {
      purchase.getSupplierListAPI({isPage: false}).then(res => {
        this.supplierInfoList = res.data !== null ? res.data.list : []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
